<template>
  <div class="app-container">

    <!-- 表头 查询与新增 -->
    <el-row>
      <el-col :span="24">
        <div class="filter-container">
          <el-input v-model="listQuery.configId" placeholder="关键词过滤" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
          <el-select
            v-model="listQuery.validFlag"
            placeholder="有效标志"
            clearable
            class="filter-item"
            style="width: 150px"
            @change="handleFilter">
            <el-option v-for="(value, key) in statusOptions" :key="key" :label="value+'('+key+')'" :value="key"/>
          </el-select>
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus-outline" @click="handleCreate">新增</el-button>
          <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="handleAttrList">返回属性列表</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 表格list -->
    <el-row>
      <el-col :span="24" :gutter="24">
        <el-table
          v-loading="listLoading"
          :key="tableKey"
          :data="list"
          :height="tableHeight"
          element-loading-text="Loading"
          border
          fit
          style="width: 100%;"
          highlight-current-row>
          <el-table-column align="center" label="序号" width="80">
            <template slot-scope="scope">
              {{ scope.$index }}
            </template>
          </el-table-column>
          <el-table-column label="商品名称" show-overflow-tooltip style="width: 10%" align="center">
            <template slot-scope="scope">
              {{ product.parent ? product.parent.pname : product.pname }}
            </template>
          </el-table-column>
          <el-table-column label="商品类别" show-overflow-tooltip style="width: 10%" align="center">
            <template slot-scope="scope">
              {{ product.pname }}
            </template>
          </el-table-column>
          <el-table-column label="属性编码" show-overflow-tooltip style="width: 10%" align="center">
            <template slot-scope="scope">
              {{ scope.row.itemCode }}
            </template>
          </el-table-column>
          <el-table-column label="属性名称" show-overflow-tooltip style="width: 10%" align="center">
            <template slot-scope="scope">
              {{ scope.row.itemName }}
            </template>
          </el-table-column>
          <el-table-column label="属性值" show-overflow-tooltip style="width: 10%" align="center">
            <template slot-scope="scope">
              {{ scope.row.itemValue }}
            </template>
          </el-table-column>
          <el-table-column label="人数限制" show-overflow-tooltip style="width: 10%" align="center">
            <template slot-scope="scope">
              {{ scope.row.numLimit }}
            </template>
          </el-table-column>
          <el-table-column label="价格" show-overflow-tooltip style="width: 10%" align="center">
            <template slot-scope="scope">
              {{ scope.row.itemPrice }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" show-overflow-tooltip style="width: 10%" align="center">
            <template slot-scope="scope">
              {{ scope.row.createdTime | timeFilter }}
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="有效标志" style="width: 10%" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.validFlag | statusFilter">{{ scope.row.validFlag | validFilter }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">
                编辑
              </el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.pageNum"
          :limit.sync="listQuery.pageSize"
          layout="total, sizes, prev, pager, next"
          style="float:right;"
          @pagination="fetchData"/>
      </el-col>
    </el-row>

    <!-- 编辑弹窗 -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="100px"
        style="">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品名称" label-width="105px" prop="productId">
              <el-input v-model="product.parent ? product.parent.pname : product.pname" disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品类别" label-width="105px" prop="productId">
              <el-input v-model="product.pname" disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="属性编码" label-width="105px" prop="itemCode">
              <el-input v-model="item.itemCode" disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="属性名称" label-width="105px" prop="itemName">
              <el-input v-model="item.itemName" disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="属性值" label-width="105px" prop="itemValue">
              <el-input v-model="temp.itemValue"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人数限制" label-width="105px" prop="numLimit">
              <el-input v-model="temp.numLimit"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="价格" label-width="105px" prop="itemPrice">
              <el-input v-model="temp.itemPrice"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" label-width="105px" prop="itemPrice">
              <el-input v-model.number="temp.sort"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="有效标志" label-width="105px">
              <el-switch
                v-model="validSwitch"
                active-color="#13ce66"
                inactive-color="#ff4949"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确认</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import SxProductItemConfigApi from '@/api/manage/SxProductItemConfigApi'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  directives: { waves },
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'gray',
        0: 'danger'
      }
      return statusMap[status]
    },
    validFilter(status) {
      const statusMap = {
        1: '有效',
        0: '作废'
      }
      return statusMap[status]
    },
    timeFilter(time) {
      if (time) {
        return new Date(time).Format('yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      productId: '',
      product: null,
      item: null,
      tableKey: 0, // 表格key值
      list: null, // 表格对象
      listLoading: true, // 表格加载框
      total: 0, // 分页总数
      tableHeight: window.innerHeight - 220, // 表格高度
      listQuery: { // 表格查询对象
        pageNum: 1,
        pageSize: 10,
        query: '',
        validFlag: undefined,
        configId: '',
        productId: '',
        itemCode: ''
      },
      temp: {}, // 编辑框临时变量
      statusOptions: { // 有效无效下拉框
        '1': '有效',
        '0': '作废'
      },
      dialogFormVisible: false, // 编辑框显示
      dialogStatus: '', // 编辑框更新插入状态
      textMap: { // 编辑框标题
        update: '编辑',
        create: '创建'
      },
      rules: { // 编辑框校验规则
        sxProductItemConfigName: [{ required: true, message: '产品属性配置表名称', trigger: 'change' }]
      }
    }
  },
  computed: {
    validSwitch: {
      // getter
      get: function() {
        return this.temp.validFlag === '1'
      },
      // setter
      set: function(newValue) {
        if (newValue) {
          this.temp.validFlag = '1'
        } else {
          this.temp.validFlag = '0'
        }
      }
    }
  },
  created() {
    debugger
    this.product = this.$route.params.product
    if (!this.product || !this.product.pid) {
      this.$router.push({ name: 'productManage' })
    } else {
      this.productId = this.product.pid
      this.item = this.$route.params.item
      this.listQuery.productId = this.productId
      this.listQuery.itemCode = this.item.itemCode
      this.fetchData()
    }

  },
  methods: {
    /**
       * 获取表格数据
       */
    fetchData() {
      const that = this
      this.listLoading = true
      this.$http.all([SxProductItemConfigApi.getPage(this.listQuery)])
        .then(this.$http.spread(function(perms) {
          that.list = perms.rows
          that.total = perms.total
          that.listLoading = false
        }))
    },
    /**
       * 新增弹窗
       */
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    /**
       * 清空弹窗内容
       */
    resetTemp() {
      this.temp = {
        configId: '',
        productId: this.productId,
        itemCode: this.item.itemCode,
        itemName: this.item.itemName,
        sort: 0,
        itemValue: '',
        numLimit: '',
        itemPrice: '',
        createdTime: '',
        modifiedTime: '',
        validFlag: '1'
      }
    },
    /**
       * 确定新增
       */
    createData() {
      const that = this
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          SxProductItemConfigApi.insert(this.temp).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 1000,
              onClose() {
                that.fetchData()
              }
            })
          })
        }
      })
    },
    /**
       * 编辑弹窗
       */
    handleUpdate(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    /**
       * 确认编辑
       */
    updateData() {
      const that = this
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          SxProductItemConfigApi.update(tempData).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 1000,
              onClose() {
                that.fetchData()
              }
            })
          })
        }
      })
    },
    /**
       * 删除操作
       */
    handleDelete(row) {
      const that = this
      SxProductItemConfigApi.remove({ configId: row.configId }).then(() => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 1000,
          onClose() {
            that.fetchData()
          }
        })
      })
    },
    /**
       * 搜索过滤
       */
    handleFilter() {
      this.listQuery.pageNum = 1
      this.fetchData()
    },

    handleAttrList() {
      this.$router.push({ name: 'itemConfigManage', params: this.product })
    }
  }
}
</script>
